const vm = new Vue({
    el: "#app",
    data: {
        monthDay: [],
        date: "",
        day: "",
        price: "0",
        stock: "充足",
        adultCount: 0,
        childCount: 0
    },
    mounted() {
        this.getDate();
        this.getGps();
        this.fixElement();
    },
    computed: {
        totalPrice() {
            return (this.adultCount + this.childCount) * parseInt(this.price);
        }
    },
    methods: {
        increaseAdult() {
            this.adultCount++;
        },
        decreaseAdult() {
            if (this.adultCount > 0) {
                this.adultCount--;
            }
        },
        increaseChild() {
            this.childCount++;
        },
        decreaseChild() {
            if (this.childCount > 0) {
                this.childCount--;
            }
        },
        changeStyle(d, index) {
            this.monthDay.forEach((_, i) => {
                const child = this.$refs['dayItem' + i][0]; // 获取对应的 DOM 元素  
                if (child) {
                    child.style.backgroundColor = ""; // 重置背景颜色  
                    const proContainer = child.querySelector('.pro');
                    if (proContainer) {
                        proContainer.style.color = "rgb(69,183,221)";
                    }
                }
            });

            // 如果点击的日期大于等于当前日期，则设置背景颜色  
            if (d >= this.day) {
                const child = this.$refs['dayItem' + index][0]; // 获取对应的 DOM 元素  
                if (child) {
                    child.style.backgroundColor = "rgb(69,183,221)"; // 设置背景颜色 
                    const proContainer = child.querySelector('.pro');
                    if (proContainer) {
                        proContainer.style.color = "#fff";
                        this.price = proContainer.children[1].innerText;
                    }
                }
            }
        },
        getDate() {
            // 获取当前日期  
            const currentDate = new Date();
            // 获取当前年份和月份  
            const year = currentDate.getFullYear();
            const month = currentDate.getMonth(); // 注意：月份是从0开始的，0表示1月，1表示2月，依此类推  
            const day = currentDate.getDate();
            // 创建一个表示下一个月的日期  
            const nextMonth = new Date(year, month + 1, 0); // 0表示上一个月的最后一天  
            // 获取当前月份的天数  
            const daysInCurrentMonth = nextMonth.getDate();
            this.monthDay = Array.from({ length: daysInCurrentMonth }, (_, index) => index + 1);
            this.date = year + "年" + (month + 1) + "月";
            this.day = day;
        },
        getGps() {
            // 百度地图API功能  
            var map = new BMap.Map("mapholder"); // 注意 id  
            var point = new BMap.Point(120.57, 31.26); // 设置地图中心点到你想要的经纬度  
            map.centerAndZoom(point, 14); // 设置缩放级别  
            map.enableScrollWheelZoom(true); // 允许鼠标滚轮缩放地图  
            // 创建标注实例  
            var marker = new BMap.Marker(point); // 在指定经纬度创建一个标注  
            map.addOverlay(marker); // 将标注添加到地图上  
            // Optional: 将地图中心移动到标注的位置  
            map.panTo(point);
        },
        fixElement() {
            window.addEventListener('scroll', function () {
                const nav = document.getElementById('nav');
                const scrollThreshold = 720; // 设置滚动阈值，100px  

                if (window.scrollY > scrollThreshold) {
                    nav.classList.add('fixed'); // 添加类以固定导航条  
                } else {
                    nav.classList.remove('fixed'); // 移除类以恢复原位  
                }
            });
        }
    }
})
